<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
        $(function(){
            $.get("find_config",{url:
                encodeURIComponent(location.href.split('#')[0])},function(data){

//                alert(JSON.stringify({
//                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
//                    appId:data.appId, // 必填，公众号的唯一标识
//                    timestamp:data.timestamp.substring(10) , // 必填，生成签名的时间戳
//                    nonceStr: data.nonceStr.substring(9), // 必填，生成签名的随机串
//                    signature: data.signature.toLowerCase(),// 必填，签名
//                    jsApiList: ['getNetworkType','scanQRCode',
//                        'startRecord','stopRecord','playVoice'] // 必填，需要使用的JS接口列表
//                }));
                wx.config({
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId:data.appId, // 必填，公众号的唯一标识
                    timestamp:data.timestamp.substring(10) , // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr.substring(9), // 必填，生成签名的随机串
                    signature: data.signature.toLowerCase(),// 必填，签名
                    jsApiList: ['getNetworkType','scanQRCode','translateVoice',
                        'startRecord','stopRecord','playVoice','updateTimelineShareData'] // 必填，需要使用的JS接口列表
                });

                wx.error(function(res){
                    // config信息验证失败会执行error函数，
                    // 如签名过期导致验证失败，
                    // 具体错误信息可以打开config的debug模式查看，
                    // 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

                });
            });


            wx.ready(function(){
//                wx.getNetworkType({
//                    success: function (res) {
//                        var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
//                        alert( networkType);
//                    }
//                });


                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            });


        });

        //12306 zdmc
        function baoxiu(){

//            wx.updateTimelineShareData({
//                title: '呵呵', // 分享标题
//                link: 'http://java59.hfbdqn.cn/menu.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//                imgUrl: 'https://www.baidu.com/img/bd_logo1.png', // 分享图标
//                success: function () {
//                    // 设置成功
//                    alert("3ks")
//                }
//            })
//            wx.scanQRCode({
//                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
//                scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
//                success: function (res) {
//                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
//                    alert(result);
//                }
//            });

            wx.startRecord();

            setTimeout(function(){
                wx.stopRecord({
                    success: function (res) {
                        var localId = res.localId;
//                        wx.playVoice({
//                            localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
//                        });

                        wx.translateVoice({
                            localId: localId , // 需要识别的音频的本地Id，由录音相关接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                alert(res.translateResult); // 语音识别的结果
                            }
                        });
                    }
                });
            },3000);

//            wx.getNetworkType({
//                    success: function (res) {
//                        var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
//                        alert( networkType);
//                    }
//                });
        }

    </script>
    <style>
        .bb{
            margin:10px 15px;
            border:1px solid #999;
            background:#eee;
            padding:10px;
            border-radius:5px;
            position:relative;

        }
        .del{
            position:absolute;
            right:3px;
            top:3px;
            font-size:12px;
        }
        .time{
            margin-top:10px;
            font-size:12px;
        }
    </style>


</head>
<body>
    <button onclick="baoxiu()">报修</button>


    <div id="add_div" style="padding-top:130px;">
        <div style="width:100%;position:fixed;top:0px;left:0px;background:white;z-index:9999;">
        <h2>备忘录</h2>
        <hr />
        <div style="font-size:30px;cursor:pointer" onclick="to_add_bak()">+</div>
        </div>
        <div id="baksDiv">

        </div>
    </div>

    <div id="content_div" style="display:none">
        <h2 onclick="return_index()">返回 新增备忘录</h2>
        <hr />
        <div>
            <span>HTML</span>
            <span>CSS</span>
            <span>JS</span>
        </div>

        <div contentEditable id="cnt4" style="height:300px;overflow: auto;border:1px solid red"></div>
        <div contentEditable
            onkeyup="test()"
             id="cnt" style="height:300px;overflow: auto;border:1px solid red"></div>
        <div
                onblur="test2()"
                contentEditable id="cnt2" style="height:300px;overflow: auto;border:1px solid red"></div>

        <div
                onblur="test3()"
                contentEditable id="cnt3" style="height:300px;overflow: auto;border:1px solid red"></div>

    </div>

    <script>

        alert(document.URL);
        var baks =[];


        function showBaks(){
            if(localStorage.baks){
                baks = JSON.parse(localStorage.baks);
            }
            baksDiv.innerHTML = "";
            for(var i=baks.length-1;i>=0;i--){
                var bb  = document.createElement("div");
                bb.className = "bb";

                var bakEle = document.createElement("div");
                bakEle.className = "bak";
                bakEle.innerHTML = baks[i].content;

                var timeEle = document.createElement("div");
                timeEle.className = "time";
                timeEle.innerHTML = new Date(baks[i].createdate).toLocaleString();

                var delEle = document.createElement("div");
                delEle.className = "del";
                delEle.innerHTML = "删除";
                delEle.xuhao = i;
                delEle.onclick = function(){
                   if(confirm("哥，确定要删吗？")){
                       baks.splice(this.xuhao,1);
                       localStorage.baks = JSON.stringify(baks);
                       showBaks();
                   }
                };

                bb.appendChild(bakEle);
                bb.appendChild(timeEle);
                bb.appendChild(delEle);
                baksDiv.append(bb);
            }
        }

        showBaks();

        function Bak(content,createdate){
            this.content = content;
            this.createdate = createdate;
        }

        function test(){
            cnt4.innerHTML = cnt.innerText;
        }

        function test2(){
            document.body.removeChild(s1);
            var s2 = document.createElement("script");
            s2.id = "s1";
            s2.innerHTML = cnt2.innerText;
            document.body.appendChild(s2);
        }

        function test3(){
            s3.innerText = cnt3.innerText;
        }

        function to_add_bak(){
            add_div.style.display = "none";
            content_div.style.display= "block";
        }

        function return_index(){
            add_div.style.display = "block";
            content_div.style.display= "none";

            if(cnt.innerHTML.trim().length>0) {
                baks.push(new Bak(cnt.innerHTML, Date.now()));
                localStorage.baks = JSON.stringify(baks);
                cnt.innerHTML = "";

                showBaks();
            }
        }
    </script>

    <script id="s1"></script>
    <style id="s3"></style>
</body>
</html>